<script setup lang="ts">
import * as bootstrap from "bootstrap"
import { computed, onBeforeUnmount, onMounted, useTemplateRef } from 'vue';
const modal_ref = useTemplateRef<HTMLElement>("modal")
let my_modal: bootstrap.Modal | null = null
const props = defineProps<{
    title:string
    msg?:string
    submit_label?:string
    cancel_label?:string
    size?:'xl'|'lg'|'sm'
}>()
const class_size=computed(() => {
    return {
        "modal-xl":props?.size=='xl',
        "modal-lg":props?.size=='lg',
        "modal-sm":props?.size=='sm',
    }
})
const emit = defineEmits<{
    close: []
    cancel: []
    submit: []
}>()
onMounted(() => {
    if (modal_ref.value) {
        my_modal = new bootstrap.Modal(modal_ref.value)
    }

})
onBeforeUnmount(() => {
 my_modal?.dispose()
})

function close_click() {
    emit("close")
}
function submit_click() {
    emit("submit")
}
function cancel_click() {
    emit("cancel")
}

function open() {
    console.log("dialog open");
    my_modal?.show()
}
function close() {
    console.log("dialog close");
    my_modal?.hide()
}
defineExpose({
    open,
    close
})
</script>
<template>
    <div>
        <div class="modal fade" id="exampleModal" ref="modal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" :class="class_size">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">{{ props.title }}</h1>
                        <button type="button" class="btn-close" aria-label="Close" @click="close_click"></button>
                    </div>

                    <div class="modal-body">
                        <slot>
                            {{ props?.msg }}
                        </slot>
                    </div>

                    <div class="modal-footer">
                        <slot name="footer">
                            <button type="button" class="btn btn-secondary"  @click="cancel_click">{{props.cancel_label?props.cancel_label:'取消'}}</button>
                            <button type="button" class="btn btn-primary" @click="submit_click">{{props.submit_label?props.submit_label:'确定'}}</button> 
                        </slot>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>

</style>